<template>
    <div>
        <div class="file-item relative" :style="{ height: fileSize, width: fileSize }">
            <el-image class="image" v-if="type == 'image'" fit="contain" :src="uri"></el-image>
            <video class="video" v-else-if="type == 'video'" :src="uri"></video>
            <div
                v-if="type == 'video'"
                class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rounded-full w-5 h-5 flex justify-center items-center bg-[rgba(0,0,0,0.3)]"
            >
                <icon name="el-icon-CaretRight" :size="18" color="#fff" />
            </div>
            <div class="file" v-else-if="type == 'file'">
                <svg t="1736216129011" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1303" width="200" height="200"><path d="M586.222933 141.9264h305.834667v726.698667h-305.834667z" fill="#FFFFFF" p-id="1304"></path><path d="M918.920533 153.941333a47.445333 47.445333 0 0 0-9.1136-33.6896c-6.997333-8.874667-16.861867-13.243733-26.760533-11.844266-98.9184-1.911467-198.109867 0-297.403733 0V0h-52.360534C390.126933 31.3344 247.108267 63.726933 104.0896 95.5392v833.6384c141.4144 31.9488 282.897067 62.190933 424.106667 94.8224h57.5488v-118.647467h278.186666c15.940267-0.989867 33.4848 0.682667 47.035734-12.049066 10.717867-21.333333 7.953067-48.196267 8.9088-72.2944-1.365333-221.9008 0.682667-444.552533-0.955734-667.0336z m-27.2384 715.605334h-305.834666V143.018667h305.834666v726.562133z" fill="#BBC9D7" p-id="1305"></path><path d="M581.956267 512h247.466666a25.6 25.6 0 1 1 0 51.2H581.956267V512zM581.956267 665.6h247.466666a25.6 25.6 0 1 1 0 51.2H581.956267v-51.2z" fill="#BBC9D7" p-id="1306"></path><path d="M478.293333 607.573333h-295.594666c-25.4976 0-42.120533-27.7504-42.120534-50.4832 0-23.1424 16.9984-45.841067 42.120534-50.4832 0-31.9488 25.4976-59.733333 54.8864-59.733333h8.4992C263.082667 401.066667 305.2032 368.64 351.556267 368.64c54.8864 0 97.006933 36.590933 109.738666 92.125867 4.266667-4.642133 12.765867-4.642133 16.9984-4.642134 37.888 0 71.8848 31.982933 71.8848 78.267734 0 41.198933-33.621333 73.181867-71.8848 73.181866z" fill="#FFFFFF" p-id="1307"></path></svg>
            </div>
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    props: {
        // 图片地址
        uri: {
            type: String
        },
        // 图片尺寸
        fileSize: {
            type: String,
            default: '100px'
        },
        // 文件类型
        type: {
            type: String,
            default: 'image'
        }
    },
    emits: ['close']
})
</script>

<style scoped lang="scss">
.file-item {
    box-sizing: border-box;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    @apply bg-br-extra-light border border-br-extra-light;
    .image,
    .video {
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
    }
    .file {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        svg {
            width: 90%;
            height: 90%;
            object-fit: contain;
        }
    }
}
</style>
